<%--
  Created by IntelliJ IDEA.
  User: jaft
  Date: 2018/7/11
  Time: 上午11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>产品销售统计</title>
    <script src="/static/bootstrap-3.3.7/js/Chart.bundle.js"></script>
    <script src="/static/bootstrap-3.3.7/js/jquery.min.js"></script>


    <script>

        $(function () {

            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ${productnames},
                    datasets: [{
                        label: '销售数量',
                        data: ${productcount},
                        backgroundColor: [
                            'rgba(0, 128, 0, 1.0)',
                            'rgba(54, 162, 235, 1.0)',
                            'rgba(255, 206, 86, 1.0)',
                            'rgba(75, 192, 192, 1.0)',
                            'rgba(153, 102, 255, 1.0)',
                            'rgba(255, 159, 64, 1.0)',
                            'rgba(255, 159, 64, 1.0)',
                            'rgba(255, 159, 64, 1.0)',
                            'rgba(255, 159, 64, 1.0)',
                            'rgba(255, 159, 64, 1.0)',
                            'rgba(255, 159, 64, 1.0)'
                        ]
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });

        });
    </script>

</head>



<body style="background-color: #f0f0f0">
<h4 style="color: green">产品销售统计</h4>

<div style="float: left; background-color: white; width: 20%; height: 140px">
    <div style="padding-top: 15px; padding-left: 10px">销售商品总数量</div>
    <div style="padding-top: 15px; padding-left: 10px; font-size: 30px">${totalcount}件</div>
</div>

<div style="float: left; background-color: white; width: 20%; height: 140px; margin-left: 10px">
    <div style="padding-top: 15px; padding-left: 10px">销售商品总金额</div>
    <div style="padding-top: 15px; padding-left: 10px; font-size: 30px; color: red">${totalmoney}</div>
</div>

<div style="float: left; background-color: white; width: 20%; height: 140px; margin-left: 10px">
    <div style="padding-top: 15px; padding-bottom: 15px; padding-left: 10px">销售排行TOP3</div>

    <c:forEach var="name" items="${names}">
        <div style="padding-left: 10px; font-size: 15px; color: green">${name}</div>
    </c:forEach>
</div>


<div style="width: 80%; height: 00px;" overflow="inherit">
    <div >
        <canvas id="myChart" class="myChart"></canvas>
    </div>
</div>


</body>
</html>
